<template>
  <div class="flex-wrap">
    <!-- 搜索区域 -->
    <el-card class="search-card">
      <el-form
        :model="queryParams"
        ref="queryForm"
        :inline="true"
        label-width="90px"
      >
        <el-form-item label="角色名称：" prop="roleName">
          <el-input
            v-model="queryParams.roleName"
            placeholder="请输入角色名称"
            clearable
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item label="权限字符：" prop="roleKey">
          <el-input
            v-model="queryParams.roleKey"
            placeholder="请输入权限字符"
            clearable
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleQuery">
            <el-icon><Search /></el-icon>查询
          </el-button>
          <el-button @click="resetQuery">
            <el-icon><Refresh /></el-icon>重置
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 表格区域 -->
    <el-card class="table-card">
      <template #header>
        <el-button type="primary" @click="addAndEdit('add')"
          >新增角色</el-button
        >
      </template>
      <el-table v-loading="loading" :data="userList" border>
        <el-table-column label="序号" type="index" width="60" align="center" />
        <el-table-column label="角色名称" prop="roleName" align="center" />
        <el-table-column label="权限字符" prop="roleKey" align="center" />
        <el-table-column label="显示顺序" prop="roleSort" align="center" />
        <el-table-column label="状态" prop="status" align="center">
          <template #default="{ row }">
            <el-switch
              v-model="row.status"
              :disabled="true"
              active-value="0"
              inactive-value="1"
            />
          </template>
        </el-table-column>
        <el-table-column label="创建时间" prop="createdTime" align="center" />
        <el-table-column label="操作" width="200" align="center">
          <template #default="{ row }">
            <el-button link type="primary" @click="addAndEdit('edit', row)"
              >编辑</el-button
            >
            <el-button link type="danger" @click="handleDel(row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="queryParams.pageNum"
          v-model:page-size="queryParams.pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
    <addAndEditRole
      v-if="addAndEditRoleObj.show"
      :type="addAndEditRoleObj.type"
      :item="addAndEditRoleObj.item"
      @cancel="cancel"
    />
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import addAndEditRole from './components/addAndEditRole.vue';
import { getRoleList, deleteRole } from '@/api/system';

// 查询参数
const initValues = () => {
  return {
    pageNum: 1,
    pageSize: 10,
    roleName: '',
    roleKey: '',
  };
};
let queryParams = reactive(initValues());

const addAndEditRoleObj = reactive({
  show: false,
  type: 'add',
});

const loading = ref(false);
const userList = ref([]);
const total = ref(0);
//
const addAndEdit = (type, item = null) => {
  addAndEditRoleObj.show = true;
  addAndEditRoleObj.type = type;
  addAndEditRoleObj.item = item;
};
const handleDel = (item) => {
  deleteRole(item.roleId).then(() => {
    getList();
    ElMessage({
      type: 'success',
      message: '删除成功',
    });
  });
};
const cancel = (flag) => {
  if (flag) {
    ElMessage({
      type: 'success',
      message: '操作成功',
    });
    getList();
  }
  addAndEditRoleObj.show = false;
};
// 查询用户列表
const getList = async () => {
  loading.value = true;
  // 处理日期范围
  const params = { ...queryParams };
  if (params.registerTime && params.registerTime.length === 2) {
    params.registerTimeStart = params.registerTime[0];
    params.registerTimeEnd = params.registerTime[1];
  }
  delete params.registerTime;
  getRoleList(params)
    .then(({ data }) => {
      console.log(data);
      total.value = data.total;
      userList.value = data.list;
    })
    .finally(() => {
      loading.value = false;
    });
};

// 处理查询
const handleQuery = () => {
  queryParams.pageNum = 1;
  getList();
};

// 重置查询
const resetQuery = () => {
  Object.assign(queryParams, initValues());
  handleQuery();
};

// 处理分页大小变更
const handleSizeChange = (size) => {
  queryParams.pageSize = size;
  getList();
};

// 处理页码变更
const handleCurrentChange = (page) => {
  queryParams.pageNum = page;
  getList();
};

// 初始加载数据
onMounted(() => {
  getList();
});
</script>

<style lang="less" scoped>
.search-card,
.table-card {
  margin-bottom: 20px;

  .el-card__header {
    padding: 15px 20px;
  }
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .header-buttons {
    display: flex;
    gap: 10px;
  }
}

.pagination-container {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

.text-muted {
  font-size: 13px;
  color: #909399;
  margin-top: 5px;
}
</style>
